<template>
  <!-- 只保留内容区 -->
  <div :class="styles['profile-container']">
    <h1 :class="styles['profile-title']">个人资料</h1>
    <div :class="styles['profile-card']">
      <div :class="styles['profile-avatar']">
        <img :src="user.avatar || '/public/student.png'" alt="头像" />
      </div>
      <div :class="styles['profile-info']">
        <div :class="styles['profile-row']"><span>用户名：</span>{{ user.username }}</div>
        <div :class="styles['profile-row']"><span>姓名：</span>{{ user.name }}</div>
        <div :class="styles['profile-row']"><span>邮箱：</span>{{ user.email }}</div>
        <div :class="styles['profile-row']"><span>学号：</span>{{ user.studentId }}</div>
        <div :class="styles['profile-row']"><span>班级：</span>{{ user.className }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth'
import styles from '@/styles/student/profile.module.css'

const authStore = useAuthStore()
const user = computed(() => authStore.user || {})
</script>